<template>
	<view class="content">
		<view>
			<image class="bg-img" src="../../static/index/img3.jpg"></image>
		</view>
		<view class="form" >
			<form  :modelValue="loginData">
				<view class="inputWrapper">
					<input class="input" type="text"  v-model="loginData.username" placeholder="请输入学号" />
				</view>
				<view class="inputWrapper">
					<input class="input" type="password"  v-model="loginData.password" placeholder="请输入密码" />
				</view>
				<view>
					<button class="btnValue" @tap="register" type="primary">绑&nbsp;&nbsp;&nbsp;&nbsp;定</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginData:{
				username: '',
				password: '',
				openid:''	
				},
			}
		},
		onLoad() {
			this.loginData.openid = uni.getStorageSync('openid')
		},
		methods: {
			register() {
				let msg = '';
				if (!this.loginData.password) {
					msg = '请输入密码';
				}
				if (!this.loginData.username) {
					msg = '请输入学号';
				}
				if(!msg){
					uni.request({
						url:`https://backendth.flymi.top/user/addopenid`,
						data:this.loginData,
						method:"POST",
						success:(res)=>{
							if(res.data.code === 200){
								wx.setStorageSync('studentnum',this.loginData.username)
								uni.showToast({
									title: '绑定成功',
									icon: "error",
									duration: 2000
								})
								uni.switchTab({
									url: '/pages/index/index',
								})
							}else if(res.data.code === 402){
								uni.showToast({
									title:'学号或者密码不正确',
									icon:'error',
									duration:2000
								})
							}else{
								uni.showToast({
									title:'请联系管理员',
									icon:'error',
									duration:2000
								})
							}
						}
					})
					
				}else{
					uni.showToast({
						title: msg,
						icon: "error",
						duration: 2000
					})
				}
			}
		}
	}
</script>

<style>
	.bg-img {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.content {
		width: 100vw;
		height: 93.4vh;
	}

	.form {
		padding: 0 100upx;
		padding-top: 100px;
	}

	.inputWrapper {
		width: 100%;
		height: 80upx;
		background: white;
		border-radius: 20px;
		box-sizing: border-box;
		padding: 0 20px;
		margin-top: 25px;
		opacity: 0.9;
	}

	.inputWrapper .input {
		width: 100%;
		height: 100%;
		text-align: center;
		font-size: 15px;
	}

	.btnValue {
		color: white;
		width: 100%;
		height: 80upx;
		border-radius: 50upx;
		margin-top: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		opacity: 0.9;
		font-weight: bold;
	}
</style>
